<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<head>
    <title>服务订购</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">
        .package-list {
            width: 680px;
            margin: 50px auto;
        }

        .package-item {
            display: inline-block;
            margin-right: 80px;
            vertical-align: top;
        }

        .package-item:last-child {
            margin-right: 0px;
        }

        .package-item-content {
            padding: 15px 30px;
            border: 1px solid #f8f8f8;
            border-radius: 5px;
            box-shadow: 0px 0px 10px #dbdee5;
            margin-bottom: 25px;
        }

        .item-content-header {
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 30px;
            min-width: 220px;
            min-height: 136px;
        }

        .item-content-header .content-header-img {
            height: 70px;
            position: relative;
            width: 60px;
            margin: 0px auto;
        }

        .item-content-header img {
            position: absolute;
            bottom: 5px;
        }

        .item-content-header .content-header-label {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
        }

        .item-content-header .content-header-desc {
            text-align: center;
            color: #aaa;
            margin-bottom: 10px;
        }

        .item-content-ul {

        }

        .item-content-li {
            line-height: 25px;
        }

        .item-content-li .iconfont {
            margin-right: 5px;
            font-weight: bold;
        }

        .item-content-li.del{
            color: #cfccd6;
        }

        .item-content-li .icon-check {
            color: #44bb00;
        }

        .item-content-li .icon-close {
            color: #e8473f;
        }

        .package-item-opt {
            text-align: center;
        }

        .package-item-opt .container {
            color: #e8473f;
            border: 1px solid #e8473f;
            margin: 0px auto;
            display: inline-block;
            padding: 5px 40px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="package-list">
                <div class="package-item">
                    <div class="package-item-content">
                        <div class="item-content-header">
                            <div class="content-header-img">
                                <img src="${ctx}/image/serverBuy/1111.png"/>
                            </div>
                            <p class="content-header-label">赛事系统</p>
                            <p class="content-header-desc">
                                签约1年，无优惠<br/>
                                一次性签约2年，优惠1000元<br/>
                                一次性签约3年，优惠2400元
                            </p>
                        </div>
                        <ul class="item-content-ul">
                            <li class="item-content-li"><i class="iconfont icon-check"></i>活动管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>众筹管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>圈子管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>手机官网</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>运动打卡</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>行者相册</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>赛事成绩管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>人员信息收集分组</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>自定义信息收集</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>会员管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>消息管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>公众号管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>二维码生成</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>图片管理</li>
                        </ul>
                    </div>
                    <div class="package-item-opt">
                        <div class="container">
                            <p>￥3000/1年</p>
                            <p>￥5000/2年</p>
                            <p>￥6600/3年</p>
                        </div>
                    </div>
                </div>
                <div class="package-item">
                    <div class="package-item-content">
                        <div class="item-content-header">
                            <div class="content-header-img">
                                <img src="${ctx}/image/serverBuy/2222.png"/>
                            </div>
                            <p class="content-header-label">社群系统</p>
                            <p class="content-header-desc">
                                签约1年，无优惠<br/>
                                一次性签约2年，优惠308元<br/>
                                一次性签约3年，优惠1006元
                            </p>
                        </div>
                        <ul class="item-content-ul">
                            <li class="item-content-li"><i class="iconfont icon-check"></i>活动管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>圈子管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>手机官网</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>运动打卡</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>行者相册</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>自定义信息收集</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>会员管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>消息管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>公众号管理</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>二维码生成</li>
                            <li class="item-content-li"><i class="iconfont icon-check"></i>图片管理</li>
                            <li class="item-content-li del"><i class="iconfont icon-close"></i>众筹管理</li>
                            <li class="item-content-li del"><i class="iconfont icon-close"></i>赛事成绩管理</li>
                            <li class="item-content-li del"><i class="iconfont icon-close"></i>人员信息收集分组</li>
                        </ul>
                    </div>
                    <div class="package-item-opt">
                        <div class="container">
                            <p>￥998/1年</p>
                            <p>￥1688/2年</p>
                            <p>￥1988/3年</p>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>

<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '服务订购',
            curr: true
        }],
        info: '官方咨询电话：4008-771-663'
    });
</script>
</body>
</html>
